<template>
  <div class="contents">
    <el-row :gutter="10" type="flex" align="middle">
      <el-col :span="8">
        <el-input placeholder="请输入区域名称" v-model="areaName">
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="goToCheak()"
          ></el-button>
        </el-input>
      </el-col>
      <el-col style="text-align: right">
        <el-button type="primary" icon="el-icon-plus" @click="addBtn()">
          新增
        </el-button>
      </el-col>
    </el-row>
    <!-- 新增dialog -->
    <el-dialog title="新增" :visible.sync="addDialogVisible" width="520px">
      <el-form
        label-width="80px"
        :model="addformData"
        ref="addform"
        :rules="ruleForm"
      >
        <el-form-item label="名称" prop="name">
          <el-input
            v-model="addformData.name"
            maxlength="45"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="默认区域" prop="areaDefault">
          <el-switch v-model="addformData.areaDefault"></el-switch>
          <div style="color: rgb(204, 204, 204); font-size: 13px">
            注册或新增客户时的默认线路,可以根据实际情况进行配置.
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCancel">取 消</el-button>
        <el-button type="primary" @click="addSave">保存</el-button>
      </span>
    </el-dialog>
    <!-- 编辑dialog -->
    <el-dialog title="编辑" :visible.sync="editDialogVisible" width="520px">
      <el-form label-width="80px" :model="editformData" :rules="ruleForm">
        <el-form-item label="名称" prop="name">
          <el-input
            v-model="editformData.name"
            maxlength="45"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="默认区域">
          <el-switch
            v-model="editformData.areaDefault"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
          <div style="color: rgb(204, 204, 204); font-size: 13px">
            注册或新增客户时的默认线路,可以根据实际情况进行配置.
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSave">保存</el-button>
      </span>
    </el-dialog>
    <el-table
      :data="table1"
      @cell-mouse-enter="enter"
      @cell-mouse-leave="leave"
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="name" label="名称">
        <template slot-scope="scope">
          <i
            v-show="scope.row.areaDefault === 1"
            class="el-icon-user"
            style="margin-right: 10px"
          ></i>
          {{ scope.row.name }}
          <div v-show="scope.row.id === isshow" class="el-butotn-div">
            <div class="div-layout">
              <span @click="editAreaName(scope.$index, scope.row)">编辑</span>
              <span @click="delAreaName(scope.$index, scope.row)">删除</span>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      layout="total, prev, pager, next,sizes, jumper"
      :current-page="currentPage1"
      :page-size="count"
      :page-sizes="[10, 20, 30, 40, 100]"
      style="text-align: right"
      :total="total"
    />
  </div>
</template>

<script>
import {
  add,
  edit,
  getList,
  del,
  paging,
  check,
} from '@/api/distribution/lineArea'
import { status } from 'nprogress'
import { logo } from '@/config'
export default {
  data() {
    return {
      addDialogVisible: false,
      editDialogVisible: false,
      addformData: {
        wsId: 1,
        name: '',
        areaDefault: 1,
        remarks: '',
      },
      editformData: {}, //编辑-表单对象。
      isshow: -1,
      ruleForm: {
        name: [
          { required: true, trigger: 'blur', message: '区域名称不能为空' },
        ],
      },
      //分页组件属性定义：
      table1: [], //客户类型-分页查询。
      count: 20,
      currentPage1: 1,
      total: 0,
      areaName: '',
    }
  },
  async mounted() {
    await this.pagingQuery()
  },
  methods: {
    //新增按钮。
    addBtn() {
      this.addDialogVisible = true
    },
    //新增-保存按钮。
    async addSave() {
      const res = await add(this.addformData)
      if (res.status == 200) {
        this.$message({
          type: 'success',
          message: '新增成功',
        })
      }
      this.$refs['addform'].resetFields() //清除input内容。
      this.addDialogVisible = false
    },
    //新增-取消。
    addCancel() {
      this.addDialogVisible = false
      this.$refs['addform'].resetFields() //清除input内容。
    },
    //编辑按钮。
    editAreaName(index, item) {
      this.editDialogVisible = true
      this.editformData = JSON.parse(JSON.stringify(item))
      console.log('77889', item)
    },
    //编辑-保存按钮。
    async editSave() {
      console.log(this.editformData)
      const res = await edit(this.editformData)

      console.log('editsave-->', res)
      if (res.status == 200) {
        this.$message({
          type: 'success',
          message: '编辑成功',
        })
      }
      this.editDialogVisible = false
      this.pagingQuery()
    },
    //删除。
    async delAreaName(index, data) {
      console.log('删除', data)
      this.$confirm(
        '此操作将永久删除[' + data.name + ']职位, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        //确认按钮执行
        .then(() => {
          this.toDel(data.id)
        })
        //确认按钮执行
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    async toDel(e) {
      let res = await del(e)
      console.log(res,'9999999999');
      if (res.status == 200) {
       this.$message.success('删除成功!')
        this.pagingQuery()
      }else{
        this.$message(res.message)
      }
    },
    //查询。
    goToCheak() {
      this.pagingQuery()
    },
    //分页查询
    pagingQuery() {
      this.listLoading = true //数据加载loading动画。
      paging(this.currentPage1, this.count, this.areaName).then((res) => {
        console.log('配送区域分页数据', res.data)
        console.log('区域名称', this.areaName)
        this.table1 = res.data.list
        this.total = res.data.total
      })
    },
    //分页点击事件。
    handleSizeChange(val) {
      this.count = val
      this.pagingQuery()
    },
    //分页点击事件。
    handleCurrentChange(val) {
      this.currentPage1 = val
      this.pagingQuery()
    },
    enter(row, column, cell) {
      this.isshow = row.id
    },
    leave(row, column, cell) {
      this.isshow = -1
    },
  },
}
</script>

<style lang="scss" scoped>
.contents {
  padding: 10px 20px;

  .el-butotn-div {
    position: absolute;
    right: 0%;
    top: 0%;
    background: #1890ff;
    color: #fff;
    height: 100%;
    width: 100px;
    padding: 0 10px;

    .div-layout {
      display: flex;
      justify-content: space-between;
      align-items: center;
      vertical-align: middle;
      height: 100%;
      cursor: pointer;
    }
  }
  ::v-deep i.el-icon-user {
    position: absolute;
    margin-right: 10px;
    right: 98%;
    top: 33%;
  }
}
</style>
